<template>
  <div class="full-calendar-header">
    <div class="header-center">
      <span class="prev-month" @click.stop="goPrev"
        ><i class="el-icon-arrow-left"></i
      ></span>
      <span class="title">{{ title }}</span>
      <span class="next-month" @click.stop="goNext"
        ><i class="el-icon-arrow-right"></i
      ></span>
      <span class="current-month" v-if="!isCurrMonth" @click="goCurrMonth"
        >本月</span
      >
    </div>
  </div>
</template>
<script type="text/babel">
// import dateFunc from './dateFunc'
import moment from 'moment';

export default {
  props: {
    currentMonth: {},
    actualMonth: {},
    titleFormat: {},
    firstDay: {},
    monthNames: {},
    locale: {}
  },
  data() {
    return {
      leftArrow: '<',
      rightArrow: '>'
    };
  },
  computed: {
    title() {
      if (!this.currentMonth) return;
      return this.currentMonth.locale(this.locale).format('YYYY[年] M[月]');
    },
    isCurrMonth() {
      let d1 = new Date(this.actualMonth._d).getTime();
      let d2 = new Date(this.currentMonth._d).getTime();
      return d1 == d2;
    }
  },
  methods: {
    goPrev() {
      var newMonth = moment(this.currentMonth)
        .subtract(1, 'months')
        .startOf('month');
      this.$emit('change', newMonth);
    },
    goNext() {
      var newMonth = moment(this.currentMonth)
        .add(1, 'months')
        .startOf('month');
      this.$emit('change', newMonth);
    },
    goCurrMonth() {
      this.$emit('change', this.actualMonth);
    }
  }
};
</script>
<style lang="scss">
.full-calendar-header {
  position: absolute;
  top: 12px;
  left: 22px;
  .header-center {
    text-align: center;
    .title {
      margin: 0 15px;
      color: #252f41;
      font-size: 14px;
      font-weight: 500;
    }
    .prev-month,
    .next-month,
    .current-month {
      display: inline-block;
      width: 32px;
      height: 32px;
      color: #606d86;
      line-height: 32px;
      font-size: 14px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #cfd4d8;
      cursor: pointer;
    }
    .current-month {
      width: 52px;
      font-size: 12px;
      color: #606d86;
      margin-left: 10px;
    }
  }
}
</style>
